<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title>首页</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
		<link href="static/css/index.css" rel="stylesheet"/>
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：导航
        -->
		<div id="head"></div>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：内容
        -->
		<div class="i-padded-tb-big i-container">
			<div class="ui container">
				<div class="ui stackable grid">
					<!--左边博客列表-->
					<div class="eleven wide column">
						<!-- 描述：header-->
						<div class="ui top attached segment">
							<div class="ui middle aligned two column grid">
								<div class="column">
									<h3 class="ui teal header">博客</h3>
								</div>
								<div class="right aligned  column">
									共 <h3 class="ui orange header i-inline-block i-text-thin" id="blogsCount">  </h3> 篇
								</div>
							</div>
						</div>
						<!--content-->
						<div class="ui attached segment" id="content">
							
						</div>
						<!--footer-->
						<div class="ui bootom attached segment">
							<div class="ui middle aligned two column grid">
								<div class="column">
									<a class="ui mini teal basic button" href="#" id="before">上一页</a>
								</div>
								<div class="right aligned  column">
									<a class="ui mini teal basic button" href="#" id="next">下一页</a>
								</div>
							</div>
						</div>
					</div>
					<!--右边的top-->
					<div class="five wide column">
						<!--分类-->
						<div class="ui segments">
							<div class="ui secondary segment">
								<div class="ui two column grid">
									<div class="column">
										<i class="idea icon"></i>分类
									</div>
									<div class="right aligned column">
										<a href="/blog-page/types.html">more <i class="angle double right icon"></i></a>													
									</div>
								</div>
							</div>
							<div class="ui teal segment">
								<div class="ui fluid vertical menu" id="types">
								</div>
							</div>	
						</div>
						<!--标签-->
						<div class="ui segments i-margin-top-large">
							<div class="ui secondary segment">
								<div class="ui two column grid">
									<div class="column">
										<i class="tags icon"></i>标签
									</div>
									<div class="right aligned column">
										<a href="/blog-page/tags.html">more <i class="angle double right icon"></i></a>													
									</div>
								</div>
							</div>
							<div class="ui teal segment" id="tags">

							</div>
						</div>
						<!--最新推荐-->
						<div class="ui segments i-margin-top-large">
							<div class="ui secondary segment" id="recommend">
								<i class="bookmark icon"></i>最新推荐
							</div>
						</div>
						<!--二维码-->
						<h4 class="ui  horizontal divider header i-margin-top-large">
							扫码关注我
						</h4>
						<div class="ui centered card" style="width: 11em;">
							<img class="ui rounded image" src="static/img/wechat.jpg"/>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：footer
        -->
        <div id="foot"></div>

	</body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
		<script src="static/js/function.js"></script>
	    <script>
	    	$('.menu.toggle').click(function(){
	    		$('.i-item').toggleClass('i-mobile-hide');
	    	});
	    	var pageNumber=1;
			var pageSize=10;
	    	$(function(){
				$('#head').load('common/head.html',null,function(){
					$('.navbarlist a').removeClass('active');
					$('.navbarlist a:eq(0)').addClass('active');
				});
				$('#foot').load('common/foot.html');
				getBlogsData(pageNumber,pageSize);
				getSideData();
	    	})
			/**
			 * 由于博客列表需要分页所以分成两个接口
			 */
			function getBlogsData(pageNumber,pageSize){
				$.ajax({
					type:"POST",
					url:urlPath+"/index/api/getBlogsData",
					data:{"pageNumber":pageNumber,"pageSize":pageSize},
					success:function(res){
						if(res.code == 200){
						  var blogsData = res.data;
						  $('#blogsCount').text(blogsData.total);
						  var blogsRow = blogsData.rows;
						  var contentHtml = $('#content');
						  var html="";
						  if(blogsRow.length>0){
							  for(var i=0;i<blogsRow.length;i++){
								  //首图不为空用首图,否则使用上传图片
								  var picture = blogsRow[i].firstPicture;
								  if(picture == null&&blogsRow[i].files != null){
									  picture = blogsRow[i].files[0].fileAddr;
								  }
								  html="<div class='ui padded vertical segment i-paded-tb-largs'>"+
											"<div class='ui mobile reversed stackable grid'>"+
												"<div class='eleven wide column' onclick=toBlogDetail('"+blogsRow[i].id+"')>"+
													"<h3 class='ui header'>"+blogsRow[i].title+"</h3>"+
													"<p class='i-text'>"+blogsRow[i].description+"</p>"+
													"<div class='ui grid'>"+
														"<div class='eleven wide column'>"+
															"<div class='ui mini horizontal link list'>"+
																"<div class='item'>"+
																	"<img src="+blogsRow[i].avatar+" alt='' class='ui avatar image'/>"+
																	"<div class='content'>"+
																		"<a href='#' class='header'>"+blogsRow[i].nickName+"</a>"+
																	"</div>"+
																"</div>"+
																"<div class='item'>"+
																	"<i class='calendar icon'></i>"+blogsRow[i].createTime+
																"</div>"+
																"<div class='item'>"+
																	"<i class='eye icon'></i>"+blogsRow[i].views+
																"</div>"+
															"</div>"+
														"</div>"+
													"<div class='right aligned five wide column'>"+
														"<a href='#' class='ui teal basic label i-padded-tiny i-text-thin'>认知升级"+
													"</div>"+
												"</div>"+
											"</div>"+
										"<div class='five wide column'>"+
											"<a href='#'>"+		
												"<img class='ui large image' src="+picture+"/>"+
											"</a>"+
										"</div>"+
									"</div>"+
								"</div>"
								contentHtml.append(html);
							  }
						  }
						}
					}
				})
			}
			
			function getSideData(){
				$.ajax({
					url:urlPath+"/index/api/getSideData",
					type:"get",
					success:function(res){
						if(res.code == 200){
							var sideData = res.data;
							var types = sideData.types;
							var recommendBlogs = sideData.recommendBlogs;
							var tags = sideData.tags;
							var typeHtml="";
							var typeSide=$('#types');
							var tagHtml="";
							var tagsSide=$('#tags');
							var recommendHtml="";
							var recommendSide=$('#recommend');
							if(types.length>0){
								for(var i=0;i<types.length;i++){
									typeHtml+="<a href='/blog-page/types.html?type=jump&&name="+types[i].name+"' class='item'>"+types[i].name+""+
											"<div class='ui teal basic left pointing label'>"+types[i].blogsOfTypeCount+"</div>"+
											"</a>";
								}
								typeSide.append(typeHtml);
							}
							if(tags.length>0){
								for(var i=0;i<tags.length;i++){
									tagHtml+="<a href='/blog-page/tags.html?type=jump&&name="+tags[i].name+"' class='ui teal basic left pointing label i-margin-tb-tiny'>"+tags[i].name+""+
									"<div class='detail'>"+tags[i].blogsOfTagCount+"</div>"+
									"</a>";
								}
								tagsSide.append(tagHtml);
							}
							if(recommendBlogs.length>0){
								for(var i=0;i<recommendBlogs.length;i++){
									recommendHtml+="<div class='ui segment'>"+
												"<a href='#' class='i-black i-text-thin'>"+recommendBlogs[i].title+"</a>"+
												"</div>";
								}
								recommendSide.after(recommendHtml);	
							}
						}
					}
				})
			}
			
			$('#next').on('click',function(){
				$('#content').children().remove();
				var total=$('#blogsCount').text();
				var maxPageNumber = Math.ceil(total/10);
				pageNumber = pageNumber==maxPageNumber?maxPageNumber:pageNumber+1;
				getBlogsData(pageNumber,pageSize);
			})
			
			$('#before').on('click',function(){
				$('#content').children().remove();
				pageNumber = pageNumber== 1 ? 1:pageNumber-1;
				getBlogsData(pageNumber,pageSize);
			})
			
			
	    </script>
</html>
